/*
 * @Author: wangguanqing 
 * @Date: 2018-05-12 14:13:55 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-06-11 10:58:08
 */
<template>
  <div class="finanContent finanLiabMain">
      <el-row type="flex" class="dataBtn">
          <div class="dateMonth">
            <el-date-picker :editable="false" :clearable="false"  @change="dateChange(0)" v-model="startMonth" type="month" placeholder="选择月" class='week-con'></el-date-picker>
            <span style="padding:0 10px">至</span>
            <el-date-picker :editable="false" :clearable="false" @change="dateChange(1)" v-model="endMonth" type="month" placeholder="选择月" class='week-con'></el-date-picker>
          </div>
          <!-- <div class="radioBtn">
              <div class="radioBtnBlue">
                <el-radio-group @change="fetchDataFinanceAssetsIiabilities(1)" v-model="defaultBtn">
                    <el-radio-button label="3008">本月</el-radio-button>
                    <el-radio-button label="3009">本季度</el-radio-button>
                    <el-radio-button label="3010">本年度</el-radio-button>
                </el-radio-group>
            </div>
          </div> -->
      </el-row>

      <!-- 公司总资产 公司总负债 公司所有者权益 -->
      <el-row type="flex" class="marginTop-20">
          <div class="finan_bloc">
              <!-- 公司总资产 -->
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="finan_blocBg totalAssets">
                <el-row class="liabil-flex">

                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="title">
                        <div class="title_top">
                            <p>公司总资产(万元)</p>
                            <p class="boldFont">
                                <i-count-up :startVal="startVal" :endVal="totalEndVal.total" :decimals="decimals" :duration="duration" :options="options" />
                            </p>
                        </div>
                        <div class="title_bot">
                            <p>
                                <span>期初:</span>
                                <span class="boldFont">
                                    <i-count-up :startVal="startVal" :endVal="totalEndVal.earlyStage" :decimals="decimals" :duration="duration" :options="options" />
                                </span>
                            </p>
                            <p>
                                <span>差值:</span>
                                <span class="boldFont">
                                    <i-count-up :startVal="startVal" :endVal="totalEndVal.differenceValue" :decimals="decimals" :duration="duration" :options="options" />
                                </span>
                            </p>
                        </div>
                    </div>
                  </el-col>

                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <pie-chart v-model="totalAssetsArr"></pie-chart>
                  </el-col>

                </el-row>
              </el-col>
              <!-- 公司总负债 -->
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="finan_blocBg totalLiabilities">
                <el-row class="liabil-flex">

                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="title">
                      <div class="title_top">
                          <p>集团总负债(万元)</p>
                          <p class="boldFont">
                              <i-count-up :startVal="startVal" :endVal="liabilitiesEndVal.total" :decimals="decimals" :duration="duration" :options="options" />
                          </p>
                      </div>
                      <div class="title_bot">
                          <p>
                              <span>期初:</span>
                              <span class="boldFont">
                                  <i-count-up :startVal="startVal" :endVal="liabilitiesEndVal.earlyStage" :decimals="decimals" :duration="duration" :options="options" />
                              </span>
                          </p>
                          <p>
                              <span>差值:</span>
                              <span class="boldFont">
                                  <i-count-up :startVal="startVal" :endVal="liabilitiesEndVal.differenceValue" :decimals="decimals" :duration="duration" :options="options" />
                              </span>
                          </p>
                      </div>
                  </div>
                  </el-col>

                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <pie-chart v-model="totalLiabilitiesArr"></pie-chart>
                  </el-col>
                </el-row>
              </el-col>
          </div>
      </el-row>

      <el-row type="flex">
        <div class="marginTop-20">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="finan-liabil_s marginRight-20">
            <div class="liabil-proportion relative">
              <chart-lay-out :showLine="false" :showAsk="true" style="margin-right:0">
                <div slot="title">各版块流动资产与负债占比</div>
                <div slot="askIco">
                  <div class="askIco">
                    <p class="askHover">流动比率：{{askValue}} (注：流动比率=流动资产/流动负债)</p>
                  </div>
                </div>
                <p slot="identi" class="identiText">
                  <span>外环:流动资产</span> <span>内环:流动负债</span>
                </p>
                <pie-chart slot="main" v-model="plateFlowingAssetsArr" :option="plateFlowingAssetsOption" :chartStyle="'min-height:280px;height:320px;'"></pie-chart>
              </chart-lay-out>
            </div>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="finan-liabil_m">
            <el-row type="flex">
              
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="liabil-current_assets">
                  <chart-lay-out>
                    <div slot="title">流动资产明细</div>
                    <div slot="identi" class="identiNumber">
                      <p>
                        <span>期末数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="flowPlateEndVal.endFlowPlate" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                      <p>
                        <span>期初数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="flowPlateEndVal.startFlowPlate" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                    </div>
                    <bar-charts slot="main" v-model="assetDetailArr" :option="assetOption"></bar-charts>
                  </chart-lay-out>
                </div>
              </el-col>

              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="liabil-current_debts">
                  <chart-lay-out :showLine="false" :changeLeft="true">
                    <div slot="title">流动负债明细</div>
                    <div slot="identi" class="identiNumber marginLeft-35">
                      <p>
                        <span>期末数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="flowDebts.endFlowDebts" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                      <p>
                        <span>期初数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="flowDebts.startFlowDebts" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                    </div>
                    <bar-charts slot="main" v-model="debtsDetailArr" :option="debtsDetailOption"></bar-charts>
                  </chart-lay-out>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </div>
      </el-row>

      <el-row type="flex">
        <div class="marginTop-20 marginBot-20">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="finan-liabil_s marginRight-20">
            <div class="liabil-proportion">
              <chart-lay-out :showLine="false" style="margin-right:0">
                <div slot="title">各版块非流动资产与负债占比</div>
                <p slot="identi" class="identiText">
                  <span>外环:非流动资产</span> <span>内环:非流动负债</span>
                </p>
                <pie-chart slot="main" v-model="plateNotFlowingAssetsArr" :option="plateNotFlowingOption" :chartStyle="'min-height:290px;height:320px;'"></pie-chart>
              </chart-lay-out>
            </div>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="finan-liabil_m">
            <el-row type="flex">
              
              <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
                <div class="liabil-current_assets">
                  <chart-lay-out>
                    <div slot="title">非流动资产明细</div>
                    <div slot="identi" class="identiNumber">
                      <p>
                        <span>期末数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="notFlowPlateEndVal.endNotFlowPlate" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                      <p>
                        <span>期初数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="notFlowPlateEndVal.startNotFlowPlate" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                    </div>
                    <bar-charts slot="main" v-model="assetNotDetailArr" :option="assetNotDetailOption"></bar-charts>
                  </chart-lay-out>
                </div>
              </el-col>

              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <div class="liabil-current_debts">
                  <chart-lay-out :showLine="false" :changeLeft="true">
                    <div slot="title">非流动负债明细</div>
                    <div slot="identi" class="identiNumber marginLeft-35">
                      <p>
                        <span>期末数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="notFlowDebts.endNotFlowDebts" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                      <p>
                        <span>期初数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="notFlowDebts.startNotFlowDebts" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                    </div>
                    <bar-charts slot="main" v-model="debtsNotDetailArr" :option="debtsOption"></bar-charts>
                  </chart-lay-out>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </div>
      </el-row>

      <!-- 所有权益分析 所有权益细分 各版块所有者权益占比 -->
      <el-row type="flex" class="marginBot-20">
          <div class="sameBack widthMax">
              <!-- 所有权益分析 -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  <chart-lay-out>
                    <span slot="title">所有权益分析</span>
                    <bar-charts slot="main" v-model="interestsAnalysisArr" :option="interestsAnalysisOption"></bar-charts>
                  </chart-lay-out>
              </el-col>
              <!-- 所有权益细分 -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out>
                    <span slot="title">所有权益细分</span>
                    <div slot="identi" class="identiNumber">
                      <p>
                        <span>期末数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="interestsVideVal.endInterestsVide" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                      <p>
                        <span>期初数:</span>
                        <span class="boldFont">
                          <i-count-up :startVal="startVal" :endVal="interestsVideVal.startInterestsVide" :decimals="decimals" :duration="duration" :options="options" />
                        </span>
                      </p>
                    </div>
                    <bar-charts slot="main" v-model="interestsVideArr" :option="interestsVideOption"></bar-charts>
                </chart-lay-out>
              </el-col>
              <!-- 各版块所有者权益占比 -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                 <chart-lay-out :showLine="false">
                    <span slot="title">各版块所有者权益占比</span>
                    <bar-chart slot="main" v-model="ownershipArr"></bar-chart>
                </chart-lay-out>
              </el-col>
          </div>
      </el-row>

  </div>
</template>

<script>
import chartLayOut from "@/components/Charts/chartLayOut";
import chart from "@/components/Charts/newChart";
import barChart from "@/components/Charts/barChart";
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import ICountUp from "vue-countup-v2";
import { GetFinanceAssetsIiabilities } from "@/api/finance/index";

export default {
  data() {
    return {
      askValue: 0,
      interestsAnalysisOption: {
        // 所有权益分析图表
        legend: {
          show: false
        },
        grid: {
          bottom: "20%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0,
            padding: [20, 0, 0, 0]
          }
        },
        labelDefault: 0
      },
      interestsVideOption: {
        // 所有权益细分图表
        labelDefault: 0
      },
      interestsVideVal: {
        // 所有权益细分 - 期初/期末
        startInterestsVide: 0,
        endInterestsVide: 0
      },
      notFlowDebts: {
        // 非流动负债明细 - 期初/期末
        startNotFlowDebts: 0,
        endNotFlowDebts: 0
      },
      flowDebts: {
        // 流动负债明细 - 期初/期末
        startFlowDebts: 0,
        endFlowDebts: 0
      },
      notFlowPlateEndVal: {
        // 非流动资产明细 - 期初/期末
        startNotFlowPlate: 0,
        endNotFlowPlate: 0
      },
      flowPlateEndVal: {
        // 流动资产明细 - 期初/期末
        startFlowPlate: 0,
        endFlowPlate: 0
      },
      currentAssetsArr: [],
      value6: [],
      startTime: "",
      endTime: "",
      defaultBtn: "3008",
      month: new Date(),
      startMonth: new Date(),
      endMonth: new Date(),
      totalAssetsArr: [], // 公司总资产分析图表
      totalLiabilitiesArr: [], // 公司总负债分析图表
      interestsArr: [], // 公司所有者权益分析图表
      assetDetailArr: [], // 流动资产明细图表
      assetOption: {
        grid: {
          left: "12%"
        },
        labelDefault: 0
      },
      assetNotDetailArr: [], // 非流动资产明细图表
      assetNotDetailOption: {
        labelDefault: 0
      },
      debtsArr: [], // 流动/非流动负债明细
      debtsDetailArr: [], // 流动负债明细
      debtsDetailOption: {
        labelDefault: 0
      },
      debtsNotDetailArr: [], // 非流动负债明细
      debtsOption: {
        grid: {
          left: "13%"
        },
        labelDefault: 0
      },
      interestsAnalysisArr: [], // 所有权益分析
      interestsVideArr: [], // 所有权益细分
      totalEndVal: {
        total: 0, // 公司总资产
        earlyStage: 0, // 公司总资产 - 期初
        differenceValue: 0 // 公司总资产 - 期末
      },
      liabilitiesEndVal: {
        total: 0, // 公司总负债
        earlyStage: 0, // 公司总负债 - 期初
        differenceValue: 0 // 公司总负债 - 期末
      },
      interestsEndVal: {
        total: 0, // 公司所有者权益
        earlyStage: 0, // 公司总资产 - 期初
        differenceValue: 0 // 公司总资产 - 期末
      },
      plateFlowingAssetsArr: [], // 各版块流动资产占比
      plateFlowingAssetsOption: {
        otherData: [],
        legend: {
          bottom: "-5"
        },
        showLabel: true, // 是否显示图标 的label
        showLine: true // 是否显示图标线 的label
      },
      plateNotFlowingAssetsArr: [], // 各版块非流动资产占比
      plateNotFlowingOption: {
        otherData: [],
        showLabel: true, // 是否显示图标 的label
        showLine: true // 是否显示图标线 的label
      },
      plateDebtsArr: [], // 各版块流动负债占比
      plateNotDebtsArr: [], // 各版块非流动负债占比
      ownershipArr: [], // 各版块所有者权益占比
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  mounted() {
    $(".bg4Con").scrollTop(0);
    var year = new Date(this.month).getFullYear();
    var month = new Date(this.month).getMonth() + 1;
    var allDays = new Date(year, month, 0).getDate();
    this.startTime = year + "-" + month + "-" + "1";
    this.endTime = year + "-" + month + "-" + allDays;
    this.fetchData();
  },
  components: {
    chart,
    ICountUp,
    barChart,
    barCharts,
    chartLayOut,
    pieChart
  },
  methods: {
    dateChange(res) {
      this.defaultBtn = "";
      if (res === 0) {
        // 第一个
        // 检查是否小于结束时间
        if (this.startMonth < this.endMonth) {
          this.startTime = this.$utils.parseTime(
            this.startMonth,
            "{y}-{m}-{d}"
          );
          this.fetchDataFinanceAssetsIiabilities(0);
        } else if (this.endMonth && this.startMonth >= this.endMonth) {
          this.$set(this, "endMonth", null);
          this.$set(this, "startTime", this.$utils.parseTime(this.startMonth, "{y}-{m}-{d}"));
          this.$message({
            message: "起始时间不能大于结束时间",
            type: "warning"
          });
          return;
        }
      } else {
        // 检查是否小于起始时间
        if (this.startMonth > this.endMonth) {
          this.$message({
            message: "起始时间不能大于结束时间",
            type: "warning"
          });
          this.$set(this, "startMonth", null);
          this.$set(this, "endTime", this.$utils.parseTime(this.endMonth, "{y}-{m}-{d}"));
          return;
        } else if (this.startMonth && this.startMonth <= this.endMonth) {
          this.endTime = this.$utils.parseTime(this.endMonth, "{y}-{m}-{d}");
          this.fetchDataFinanceAssetsIiabilities(0);
        }
      }
    },
    async fetchDataFinanceAssetsIiabilities(val) {
      // val == 0 datechange val == 1 选择框
      try {
        let params = {};
        if (val === 0) {
          params = {
            startTime: this.startTime,
            endTime: this.endTime
          };
        } else {
          params = {
            timeType: this.defaultBtn
          };
        }
        var res = await GetFinanceAssetsIiabilities(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          result.singleTargetListWithSum.forEach(item => {
            if (item.code === 30001) {
              // 公司总资产
              this.$set(this.totalEndVal, "total", item.total);
              this.$set(this.totalEndVal, "earlyStage", item.earlyStage);
              this.$set(
                this.totalEndVal,
                "differenceValue",
                item.differenceValue
              );
              this.$set(this, "totalAssetsArr", item.list);
            } else if (item.code === 30002) {
              // 公司总负债
              this.$set(this.liabilitiesEndVal, "total", item.total);
              this.$set(this.liabilitiesEndVal, "earlyStage", item.earlyStage);
              this.$set(
                this.liabilitiesEndVal,
                "differenceValue",
                item.differenceValue
              );
              this.$set(this, "totalLiabilitiesArr", item.list);
            } else if (item.code === 30003) {
              // 公司所有者权益
              this.$set(this.interestsEndVal, "total", item.total);
              this.$set(this.interestsEndVal, "earlyStage", item.earlyStage);
              this.$set(
                this.interestsEndVal,
                "differenceValue",
                item.differenceValue
              );
              this.$set(this, "interestsArr", item.list);
            }
          });
          result.singleTargetList.forEach(item => {
            if (item.code === 30007) {
              // 各版块流动资产占比
              this.$set(this, "plateFlowingAssetsArr", item.list);
            } else if (item.code === 30008) {
              // 各版块非流动资产占比
              this.$set(this, "plateNotFlowingAssetsArr", item.list);
            } else if (item.code === 30012) {
              // 各版块流动负债占比
              this.$set(this, "plateDebtsArr", item.list);
              this.$set(this.plateFlowingAssetsOption, "otherData", item.list);
            } else if (item.code === 30013) {
              // 各版块非流动负债占比
              this.$set(this, "plateNotDebtsArr", item.list);
              this.$set(this.plateNotFlowingOption, "otherData", item.list);
            } else if (item.code === 30016) {
              // 各版块所有权益占比
              this.$set(this, "ownershipArr", item.list);
            }
          });
          result.multipleTargetList.forEach(item => {
            if (item.code === 30004) {
              // 流动资产明细
              this.$set(this, "assetDetailArr", item.list);
            } else if (item.code === 30005) {
              // 非流动资产明细
              this.$set(this, "assetNotDetailArr", item.list);
            } else if (item.code === 30006) {
              // 流动/非流动资产分析
              this.$set(
                this.flowPlateEndVal,
                "endFlowPlate",
                item.list[0].list[0].value
              );
              this.$set(
                this.flowPlateEndVal,
                "startFlowPlate",
                item.list[0].list[1].value
              );
              this.$set(
                this.notFlowPlateEndVal,
                "endNotFlowPlate",
                item.list[1].list[0].value
              );
              this.$set(
                this.notFlowPlateEndVal,
                "startNotFlowPlate",
                item.list[1].list[1].value
              );
            } else if (item.code === 30009) {
              // 流动负债明细
              this.$set(this, "debtsDetailArr", item.list);
            } else if (item.code === 30010) {
              // 非流动负债明细
              this.$set(this, "debtsNotDetailArr", item.list);
            } else if (item.code === 30011) {
              // 流动/非流动负债分析
              this.$set(
                this.flowDebts,
                "endFlowDebts",
                item.list[0].list[0].value
              );
              this.$set(
                this.flowDebts,
                "startFlowDebts",
                item.list[0].list[1].value
              );
              this.$set(
                this.notFlowDebts,
                "endNotFlowDebts",
                item.list[1].list[0].value
              );
              this.$set(
                this.notFlowDebts,
                "startNotFlowDebts",
                item.list[1].list[1].value
              );
            } else if (item.code === 30014) {
              // 所有权益分析
              var interestsList = item.list[0];
              this.$set(
                this.interestsVideVal,
                "endInterestsVide",
                interestsList.list[0].value
              );
              this.$set(
                this.interestsVideVal,
                "startInterestsVide",
                interestsList.list[1].value
              );
              this.$set(this, "interestsAnalysisArr", item.list);
            } else if (item.code === 30015) {
              // 所有权益细分
              this.$set(this, "interestsVideArr", item.list);
            }
          });
          result.singleTargetListWithSingleValue.forEach(item => {
            if (item.code === 30017) {
              this.$set(this, "askValue", item.value);
            }
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    fetchData() {
      this.fetchDataFinanceAssetsIiabilities(0);
    }
  }
};
</script>


<style lang="scss">
@import "../../../../styles/element-ui/date/dateMonth.css"; // 月份选择
@import "../../../../styles/element-ui/radioBtn/radioBtnBlue.scss";
@import "../../../../styles/pages/finance/_finanliab";
</style>
